<template>
  <div style="overflow-x: hidden;">
    <div id="app">
      <cube-scroll ref="scroll" :data="items" direction="horizontal" class="horizontal-scroll-list-wrap" style="margin-right: 30px;">
        <ul class="list-wrapper">
          <li v-for="item in items" class="list-item" :key="item">{{ item }}</li>
        </ul>
      </cube-scroll>

      <button style="position: absolute; right: 0; top: 0; height: 45px;">三</button>
    </div>

    <!-- 盒子动画UI结构 -->
    <div class="tween_box" :style="{transform: `translateX(${position.x}%)`}">
      <div class="b1">
        <p>1111</p>
        <p @click="moveTO">2222 >></p>
        <p>3333</p>
      </div>
      <div class="b2">
        <p @click="MoveBack">&lt;返回</p>
        <p>4444</p>
        <p>5555</p>
        <p>6666</p>
      </div>
    </div>
  </div>
</template>

<script>
// 导入动画包
import TWEEN from '@tweenjs/tween.js'

export default {
  name: 'App',
  data() {
    return {
      items: [
        '快车',
        '小巴',
        '专车',
        '顺风车',
        '代驾',
        '公交',
        '自驾租车',
        '豪华车',
        '二手车',
        '出租车'
      ],
      position: { x: 0 }
    }
  },
  methods: {
    // 左移方法
    moveTO() {
      var tween = new TWEEN.Tween(this.position)
      tween.to({ x: -100 }, 150)
      tween.start()
      animate()

      function animate() {
        requestAnimationFrame(animate)
        TWEEN.update()
      }
    },
    // 右移方法
    MoveBack() {
      var tween = new TWEEN.Tween(this.position)
      tween.to({ x: 0 }, 150)
      tween.start()
      animate()

      function animate() {
        requestAnimationFrame(animate)
        TWEEN.update()
      }
    }
  }
}
</script>

<style lang="less">
.app {
  display: flex;
}
.horizontal-scroll-list-wrap {
  border: 1px solid rgba(0, 0, 0, 0.1);
  .cube-scroll-content {
    display: inline-block;
  }
  .list-wrapper {
    padding: 0 10px;
    line-height: 40px;
    white-space: nowrap;
  }
  .list-item {
    display: inline-block;
    margin: 0 20px;
  }
}

// 动画
.tween_box {
  line-height: 30px;
  border: 1px solid #ccc;
  position: relative;
  .b1 {
    background-color: pink;
    width: 100%;
  }
  .b2 {
    background-color: cyan;
    width: 100%;
    position: absolute;
    top: 0;
    transform: translateX(100%);
  }
}
</style>
